<!--
 * @Author: 宋杰
 * @Date: 2021-03-09 14:54:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-03-16 10:32:50
 * @Description: 一家十一口(猜一字)
-->
<template>
  <div>
    <div ref="main" style="width: 100%; height: 94%"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  components: {},
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts
      // let t = this;
      var myChart = this.$echarts.init(this.$refs.main);
      myChart.setOption({
        //标题
        title: {
          text: "股东渠道",
          x: "left", //标题位置
          y:"2%",
          textStyle: {
            //标题内容的样式
            color: "#2F9CDF",
            fontStyle: "normal",
            fontWeight: 200,
            fontSize: 20, //主题文字字体大小，默认为18px
            left: 10,
          },
        },
        stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)",
          // formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        //图例
        legend: {
          icon: "circle",
          //图例  标注各种颜色代表的模块
          orient: "vertical", //图例的显示方式  默认横向显示
          bottom: 30, //控制图例出现的距离  默认左上角
          right: "0%", //控制图例的位置
          itemWidth: 10, //图例颜色块的宽度和高度
          itemHeight: 10,
          textStyle: {
            //图例中文字的样式
            color: "#fff",
            fontSize: 12,
          },
          data: ["海澜之家", "海澜之家2", "海澜之家4", "海澜之家5"], //图例上显示的饼图各模块上的名字
        },
        //饼图中各模块的颜色
        color: ["#0091FF", "#6236FF", "#F44765 ", "#F7B500"],
        // 饼图数据
        series: {
          // name: 'bug分布',
          type: "pie", //echarts图的类型   pie代表饼图
          radius: ["40%","55%"], //饼图中饼状部分的大小所占整个父元素的百分比
          center: ["40%", "50%"], //整个饼图在整个父元素中的位置
          // data:''               //饼图数据
          data: [
            //每个模块的名字和值
            { name: "海澜之家", value: 10 },
            { name: "海澜之家2", value: 5 },
            { name: "海澜之家4", value: 30 },
            { name: "海澜之家5", value: 50 },
          ],
          itemStyle: {
            normal: {
              label: {
                show: true, //饼图上是否出现标注文字 标注各模块代表什么  默认是true
                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                formatter: "{d}%" /*饼状图内显示百分比*/,
                //data:['10%','5%','10%','30%','50%'],
              },
              labelLine: {
                show: true, //官网demo里外部标注上的小细线的显示隐藏    默认显示
              },
            },
          },
        },
      });
    },
  },
};
</script>

<style lang="scss"></style>
